<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>鼠标放上去显示遮罩层</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei';
            background-color: #aaa;
            font-size: 14px;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #header {
            width: 460px;
            height: 540px;
            margin: 0 auto;
            background-color: #fff;
            cursor: pointer;
            position: relative;
        }
        #header .bg{
            width: 100%;
            height: 100%;
            background-color: orange;
            opacity: 0;
        }
        #header .head{
            width: 100%-20;
            height: 100%-20;
            margin: 10px;
            background-color: #fff;
            position: relative;
            top: -100%;
        }
        #header .head img {
            width: 100%;
        }
        #header .head p{
            padding: 9px 10px;
            text-align: justify;
            line-height: 22px;
        }

        #show{
            width: 460px;
            margin: 10px auto;
            background-color: #fff;
        }
        #show ul{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
        }
        #show ul li{
            margin: 10px;
            width: 250px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        #show ul li img{
            width: 100%;
        }
        .maskLayer{
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            left: -100%;
            padding: 10px;
            /*display: none;*/
        }
        .maskLayer p{
            text-align: justify;
            font-size: 12px;
            line-height: 18px;
            color: #fff;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="bg"></div>
        <div class="head">
            <img src="img/01.jpg" alt="">
            <p><strong>【路飞三兄弟的羁绊】</strong>艾斯、萨博与路飞是从小的结义兄弟，俗称ASL。艾斯在路飞的开始成长的道路上给予了他不少的帮助，她是白胡子时代的一个缩影，新旧时代需要交替，萨博是新时代的象征，所以艾斯退场时必然的，另一方面，尾田考虑到路飞是中要成长起来，不能过度的以来艾斯，所以就找了个理由让艾斯便当，让路飞真正成长起来。可是为什么后来萨博有登场了呢，因为尾田担心路飞在失去艾斯之后可能会孤单，艾斯虽然死了，但是萨博顶替了他，可以称得上艾斯的精神还是活在萨博的身体里，一直支撑着路飞......</p>
        </div>
    </div>
    <div id="show">
        <ul>
            <li>
                <img src="img/02.jpg" alt="">
                <div class="maskLayer">
                    <p><strong>罗罗诺亚·索隆</strong></p>
                    <p>草帽海贼团中的战斗员，使用三把刀战斗的三刀流剑士，二年前超新星11人之一。爱喝酒，爱睡觉，讲义气，但却很路痴。为了小时候与古伊娜的约定而踏上了前往世界第一剑士的道路，随后成为主角蒙奇·D·路飞的第一个伙伴。在初次败给世界第一剑士“鹰眼米霍克”后向路飞发誓永不再败，并且更加努力的锻炼自己。两年后的他成功与伙伴们汇合，并且为了实现自己的梦想，奔赴强者如云的新世界。</p>
                </div>
            </li>
            <li>
                <img src="img/03.jpg" alt="">
                <div class="maskLayer">
                    <p><strong>文斯莫克·山治</strong></p>
                    <p>草帽海贼团厨师，金发，有着卷曲眉毛，永远遮住半边脸的家伙，香烟不离口，最爱女人，很花心但很有风度，海贼中的绅士。小时候跟随大海贼红脚哲普学习厨艺。踢技以快准狠被海军称之为“黑足”，但从不愿意伤害任何的女性，哪怕是敌人。在经过司法岛一战后也成了悬赏对象，首次悬赏就有7700万之高（但通缉令是画上去的）。梦想是找到传说之海All Blue而跟随路飞一同进入了伟大航路。是文斯莫克家族的第三子。</p>
                </div>
            </li>
        </ul>
    </div>
    <div style="width: 100%;margin-top:20px;text-align: center"><a href="01-鼠标停留显示遮罩层.html" target="_blank">示范模板</a></div>
</body>

</html>

<script>
    // 添加悬停事件 动画效果(自定义动画)
    $('#header').hover(function(){
        $('#header .bg').animate({'opacity':'1'},200);
    },function(){
        $('#header .bg').animate({'opacity':'0'},200);
    })

    // 添加悬停事件 滑动效果(自定义动画)
    $('#show ul li').each(function(){
        $(this).hover(function(){
            $(this).find('.maskLayer').animate({'left':'0'},200);
        },function(){
            $(this).find('.maskLayer').animate({'left':'-100%'},200);
        })
    });

</script>